import { Meta, Source } from '@storybook/blocks';

<Meta title="INTRODUCTION/Deploying" />

## Deploying to Home Assistant

To setup a project with @hakit, you can use the following command:

<Source dark code={`
  npm create hakit@latest
`} />

This script will completely scaffold your project, produce documentation for the next steps in the README.md file, and a really quick way to get up and going!

There is some further information required to get the deploy script working, so please read on.

Homeassistant is bundled with a webserver, which we can utilize to host our new dashboard, we do need to gather/setup some credentials to get going:

## Retrieving SSH Credentials

1. In Homeassistant: Install and setup the [Advanced SSH & Web Terminal](https://github.com/hassio-addons/addon-ssh) addon, this is very easy!
  - Click on your "Profile name" in your HA dashboard
  - Scroll down and enable "Advanced mode"
  - Go to Settings -> Addons -> ADD-ON STORE for "SSH & Web Terminal" -> Install
  - Once installed, Go to the configuration tab, enter a password into the field and save
  - Change default password
  - The username has to be set to `root` (default is `hassio`).
  - The sftp flag has to be set to true (default is false, and true requires the username to be root).
  - Ensure the PORT is 22, save
2. Finally, update the .env file that's created with the `create hakit` script, or add it to your project manually:

```bash
VITE_HA_URL=http://homeassistant.local:8123 # your home assistant hostname or IP address
VITE_FOLDER_NAME=ha-dashboard # the folder name you want to copy the files to, this should also match the base name in the vite.config.ts `base: '/local/ha-dashboard/'`
VITE_SSH_USERNAME=root # the default username is root, if you changed this, change this value
VITE_SSH_PASSWORD=yourpassword # the password you set in the addon
VITE_SSH_HOSTNAME=yourhostname # your home assistant hostname or IP address, if you get EHOSTUNREACH when connecting, try your IP address `ping homeassistant.local` to get your IP address
```

The `VITE_HA_TOKEN` instructions can be found [here](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/introduction-typescriptsync--docs) under the pre-requisites section.

You should be able to run `npm run build && npm run deploy` and your dashboard should be available at a link printed in the terminal!

Now you should be able to access your dashboard (assuming you haven't changed the `VITE_FOLDER_NAME` in the environment variables):

[http://homeassistant.local:8123/local/ha-dashboard/index.html](http://homeassistant.local:8123/local/ha-dashboard/index.html)

or with nabucasa:

[https://YOUR_NABU_CASA_ID.ui.nabu.casa/local/ha-dashboard/index.html](https://YOUR_NABU_CASA_ID.ui.nabu.casa/local/ha-dashboard/index.html)

## Home Assistant Addon

If you want to use the HAKIT addon for home assistant so you can access your custom dashboard from your home assistant sidebar, you can install and follow the [setup steps here](https://github.com/shannonhochkins/ha-component-kit/blob/master/ADDON.md)